// 获取导航栏元素
let btn_left = document.querySelector(".btn_left");
let bigdiv = document.querySelector(".bigdiv");
let head = document.querySelector(".head");

// 导航栏
// 准备一个开关 开始是关
let a = false;
// 点击事件按钮
btn_left.addEventListener("click", function () {
  //点击按钮时 a = true;
  a = !a;
  if (a == true) {
    bigdiv.style.transform = "translate(200px)";
  } else {
    bigdiv.style.transform = "translate(0px)";
  }
});

let btn1 = document.querySelector(".btn1");
let son = document.querySelector(".son");
let New = [];
let index = 0;

var dataInfo = [
  { name: "English chan", money: 392001 },
  { name: "alex chan", money: 568932 },
  { name: "melon chan", money: 698756 },
  { name: "Clare Langner", money: 292489 },
  { name: "Abigail Rice", money: 953957 },
  { name: "Clarice Dias", money: 168472 },
  { name: "Vernon Lucas", money: 718225 },
  { name: "Nina Schmidt", money: 889147 },
];
// let 一个空的字符串

//   获取tbody
let tbodys = document.querySelector("tbody");
// 获取点击按钮
let btn2 = document.querySelector(".btn2");
let btn3 = document.querySelector(".btn3");
let btn4 = document.querySelector(".btn4");
let btn5 = document.querySelector(".btn5");
//   循环遍历

// 添加用户
btn1.addEventListener("click", function () {
  // index = 原始数组的长度就直接结束
  if (index >= dataInfo.length) {
    return;
  }
  New.push(dataInfo[index]);
  index++;
  fn();
});

// 资金翻倍
btn2.addEventListener("click", function () {
  New.forEach(function (item) {
    item.money = item.money * 2;
    // console.log( item.money )
  });
  fn();
});

// 查询百万富翁
btn3.addEventListener("click", function () {
    // 定义一个新的数组等于旧数组过滤里面的每一项
  let New_one = New.filter(function (item) {
    // 条件是大于等于1百万的就直接赋值到新的数组的里面
    return item.money >= 1000000;
  });
  let srt = ""
  New_one.forEach(function (item) {
   srt += `
   <tr>
   <td>${item.name}</td>
   <td>$${item.money.toLocaleString()}.00</td>
   </tr>
   `
  });
  tbodys.innerHTML = srt;
});

// 查询财富榜
btn4.addEventListener("click", function(){
    New = New.sort(function(a,b){
    return b.money - a.money;
    // console.log(New_two);
    });
    fn();
});

// 计算总额
// 获取tfoot
let tfoot = document.querySelector("tfoot");

btn5.addEventListener("click", function(){
    // let一个新的变量装着 = 新的数组每一项相加之和
    let New_three = New.reduce(function (prev, item){
        return prev + item.money;
    },0);

    let str=`
    <tr>
    <td>Total sum:</td>
    <td>$${New_three}</td>
    </tr>`;
    // 将数据渲染到tfoot里面，就不会覆盖tbody的数据
    tfoot.innerHTML =str;
});





// 封装函数
// function fn(){
//     let str = "";
//     New.forEach(function (item) {
//         str += "<tr>";
//         for (var k in item) {
//           str += "<td>" + item[k] + "</td>";
//         }
//         str += "</tr>";
//       });
//       tbodys.innerHTML = str;
// }
// 渲染数据
function fn() {
  let str = "";
  New.forEach(function (item) {
    str += `
        <tr>
            <td>${item.name}</td>
            <td>$${item.money.toLocaleString()}.00</td>
        </tr>
        `;
  });
  tbodys.innerHTML = str;
}
